import { Button, CloseOutlined, Dialog } from 'esy-ui';
import { ReactNode, useCallback, useState } from 'react';
import { useFormatText, useNavigation } from '@/hooks';
import { useGlobalStore, useUserInfoStore } from '@/mobx';
import { postLoginOut } from '@/services';
import { nameSuffix } from '@/constants';

const navList = [
  {
    tKey: 'pref_activity',
    link: '/activity',
  },
  {
    tKey: 'online_service',
    link: '',
  },
  {
    tKey: 'person_center',
    link: '/mine',
  },
  {
    tKey: 'text_30',
    link: '/bet/amount-trans',
  },
  {
    tKey: 'text_6',
    link: '/bet/record',
  },
  {
    tKey: 'text_36',
    link: '/bet/withdraw-record',
  },
  {
    tKey: 'text_96',
    link: '/bet/invite/1',
  },
  {
    tKey: 'text_38',
    link: '/bet/infomation',
  },
  {
    tKey: 'text_101',
    link: '/bet/system-nots',
  },
  {
    tKey: 'text_40',
    link: '/feedback',
  },
];

function Sidbar({ children }: { children: ReactNode }) {
  const { userInfo, clearUserInfo } = useUserInfoStore();
  const { changeState, OnlineCustomerUrl } = useGlobalStore();
  const [open, setOpen] = useState(false);
  const { text } = useFormatText();
  const navigation = useNavigation();

  const onOpen = () => {
    setOpen(true);
  };

  const onClose = useCallback(() => {
    setOpen(false);
  }, []);

  const toPage = (e) => {
    let linkUrl = e.target.getAttribute('data-link-url');
    if (!linkUrl) {
      linkUrl = OnlineCustomerUrl;
    }
    if (linkUrl) {
      navigation(linkUrl);
    }
  };

  // 退出登录
  const onlogout = () => {
    changeState('isLoading', true);
    postLoginOut({})
      .then(() => {
        clearUserInfo();
        onClose();
      })
      .catch(() => {})
      .finally(() => {
        changeState('isLoading', false);
      });
  };

  return (
    <>
      <Dialog classNames={{ body: 'w-full h-full' }} open={open} onClose={onClose} direction='left'>
        <div className='w-full h-full bg-body flex flex-col'>
          <div className='py-2 px-3 bg-bed min-h-28 flex flex-col justify-between'>
            <div className='flex items-center'>
              <CloseOutlined className='text-sm text-white p-2' onClick={onClose} />
            </div>
            {userInfo?.Token ? (
              <div className='text-sm text-white font-bold'>
                {userInfo?.NickName} {nameSuffix}
              </div>
            ) : null}
          </div>
          <div className='flex-1'>
            {(userInfo?.Token ? navList : navList.slice(0, 2)).map((it) => (
              <div key={it.tKey} className='py-3 px-6 text-desc text-sm border-b border-solid border-bdr-1' data-link-url={it.link} onClick={toPage}>
                {text(it.tKey)}
              </div>
            ))}
          </div>
          {userInfo?.Token ? (
            <Button type='primary' className='my-4 mx-3' onClick={onlogout}>
              {text('text_132')}
            </Button>
          ) : null}
        </div>
      </Dialog>
      <span onClick={onOpen}>{children}</span>
    </>
  );
}

export default Sidbar;
